<template>
	<view class="payTour">
		<view class="header">
			<image :src="img" mode=""></image>
			<view class="name">
				<text class="userName">{{ name }}</text>
				<p class="userTitle">{{ title }}</p>
			</view>
		</view>
		<p>金额选择</p>
		<view class="money">
			<button type="default" value="" :class="activeClass == index ?'active':''" v-for="(money,index) in moneys" :key="index"
			 @tap="seleted(index)">{{money}}元</button>
		</view>
		<p>自定义金额</p>
		<input type="text" :value="value" placeholder="请输入自定义金额                       元">
		<p>选择支付方式</p>
		<view class="content3">
			<radio-group class="radio">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="index" @tap="payTotal(item.value)">
					<image :src="item.src" mode=""></image>
					<view class="name">{{ item.name }}</view>
					<view>
						<radio :value="item.value" class="radioIpunt" />
					</view>
				</label>
			</radio-group>
		</view>

		<button type="default" style="background-color: #FF824A;color: #FFFFFF;width: 690upx;line-height:90upx;border-radius: 50upx;margin-bottom: 30upx;"
		 @click="pay">立即打赏</button>
		<button type="default" style="background-color: #FFFFFF;color: #999999;width: 690upx;line-height:90upx;border-radius: 50upx;margin-bottom: 60upx; ">回到首页</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moneys: [10, 20, 30, 50],
				activeClass: -1,
				img: require('../../static/img/news/tupiana.png'),
				name: '娃哈哈',
				value: '',
				title: '我们什么都不擅长，只能坚持。',
				items: [{
						value: 'wx',
						name: '微信支付',
						src: require('../../static/img/news/wx.png')
					},
					{
						value: 'alipay',
						name: '支付宝支付',
						src: require('../../static/img/news/zhifubao.png')
					},
					{
						value: 'yue',
						name: '余额支付',
						src: require('../../static/img/news/yue.png')
					}
				]
			};
		},
		methods: {
			payTotal(value) {
				console.log(value);
			},
			seleted(index) {
				this.activeClass = index;
				console.log(this.moneys[index] + "元")
			},
			input() {
				console.log("触发了")

			},
			pay: function() {
				
			}
		}
	};
</script>

<style lang="scss">
	.payTour {
		width: 100%;
		height: 1500upx;
		background-color: #F5F6F7;

		.header {
			background: #FFFFFF;
			height: 158upx;
			padding-left: 30upx;
			padding-top: 30upx;
			display: flex;

			image {
				width: 100upx;
				height: 100upx;
				border-radius: 50%;

			}

			.name {
				.userName {
					font-size: 32upx;
					padding-left: 30upx;
					color: #333333;
				}

				.userTitle {
					font-size: 28upx;
					color: #999999;
				}

			}

		}

		p {
			margin: 30upx 0upx 30upx 30upx;
			font-size: 28upx;
			color: #989898;
		}

		.money {
			padding-left: 30upx;
			margin-top: 30upx;
			height: 240upx;
			background-color: #F5F6F7;

			button {
				width: 335upx;
				height: 100upx;
				background: #FFFFFF;
				border-radius: 8upx;
				margin: 0upx 20upx 20upx 0upx;
				float: left;
				color: #999999;
			}

			.active {
				color: #EE0F24;
				background: rgba(255, 238, 240, 1);
				border: 1px solid rgba(238, 15, 36, 1);
			}
		}

		input {
			width: 650upx;
			margin-left: 30upx;
			margin-top: 30upx;
			height: 100upx;
			background-color: #FFFFFF;
			padding-left: 30upx;
		}

		.content3 {
			width: 690upx;
			background-color: #ffffff;

			margin: 0 auto;
			margin-bottom: 100upx;

			.radio {
				width: 660upx;
			}

			image {
				width: 70upx;
				height: 70upx;
				top: 16upx;
				position: relative;
			}

			.name {
				width: 520upx;
				height: 100upx;
				font-size: 28upx;
			}

			.uni-list-cell {
				position: relative;
				display: flex;
				line-height: 100upx;
				border-bottom: 1px solid #F5F6F7;
			}
		}

	}
</style>
